.demo-preview-right {
  width: 100%;
  height: 100%;
  padding: 20px 50px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  .chart-title{
    color: rgba(0, 0, 0, 0.65);
    margin: 24px 0;
    margin-top: 0;
    font-size: 1.25rem;
  }
  .col-item{
    margin-bottom: 40px;
    .chart-item{
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      transition: all .5s;
      border: none;
      box-shadow: 0 2px 8px rgba(84, 48, 132, 0.1);
      overflow: hidden;
      border-radius: 4px;
      position: relative;
      background-color: #fff;
      width: 100%;
      &:hover{
        -webkit-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
        transform: translateY(-8px);
        box-shadow: 0 12px 24px rgba(84, 48, 132, 0.06);
      }
      .wrapper{
        display: block;
        position: relative;
        width:100%;
        height: 0;
        padding-bottom: 100%;
        .cover{
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          width: 100%;
          height: calc( 100% - 40px );
          top: 0;
          left:0;
          border-bottom:1px solid #F4F4F4;
          box-sizing: border-box;
          .spic{
            display:block;
            width: calc( 100% - 16px );
            height:calc( 100% - 32px );
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
          }
        }
        .title{
          background: #F7F9FA;
          height: 40px;
          width: 100%;
          position: absolute;
          bottom:0;
          left: 0;
          text-align: left;
          padding: 8px 4px;
          color: #666666;
          font-size: 14px;
          box-sizing: border-box;
        }
      }
    }
  }
}
